<template>
  <div class="userdetaillayout">
     <div class="useruserdetail">
      <div class="userdetailavatar">
          <img :src="detailData.imgurl">
      </div>
      <div :class="this.color">
       <span>{{detailData.name}} <el-button :type="this.type" :icon="this.male" circle></el-button></span>
      </div>  
      <div class="userexplain">
       <p>{{detailData.explain}}</p>
      </div>
      <div class="userdetailmail">
          <span>邮箱账号：{{detailData.email}}</span>
      </div>
      <div class="userdetailtime">
          <span>生日：{{this.dateformate(detailData.birth)}}</span>
          <span>注册时间：{{this.dateformate(detailData.time)}}</span>
      </div>
      <div class="userdetailbutton">
          <el-button  @click="outerVisible = true" type="primary">完善个人信息</el-button>
      </div>
     
         <el-dialog title="个人信息修改：" :visible.sync="outerVisible">
            <el-dialog
            width="30%"
            title="密码修改："
            :visible.sync="innerVisible"
            append-to-body>
            <div class="resetpsw">
                <div class="resetpswinput">
                    <div class="old">
                        <el-input
                            v-model="passwordData.oldPassword"
                            type="password"
                            placeholder="原密码"
                            show-password
                        />
                    </div>
                    <div class="new">
                        <el-input
                            v-model="passwordData.newPassword"
                            type="password"
                            placeholder="新密码"
                            show-password
                        />
                    </div>
                    <div class="new2">
                        <el-input
                            v-model="passwordData.newPassword2"
                            type="password"
                            placeholder="确认密码"
                            show-password
                        />
                    </div>
                </div>
                <div class="resetpswbutton">
                    <el-button @click="innerVisible = false"  plain>取 消</el-button>
                    <el-button type="success" @click="resetpsw" plain>修改</el-button>
                </div>
            </div>
            </el-dialog>
            <div class="detailform">
                <div class="avartarinput">
                   <form>  
                       <span>头像上传：</span>
                       <input name="file" type="file" @change="uploadAvatar" />
                    </form>
                </div>
                
                <div class="detailforminput">
                    <el-form  label-width="80px">
                        <el-form-item label="昵称">
                            <el-input v-model="detailData.name"></el-input>
                        </el-form-item>

                        <el-form-item label="性别">
                            <el-radio-group v-model="detailData.sex" >
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="生日">
                            <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期"  v-model="detailData.birth" style="width: 100%;"></el-date-picker>
                            </el-col>
                        </el-form-item>

                        <el-form-item label="个人介绍">
                            <el-input type="textarea" :rows="4" v-model="detailData.explain"></el-input>
                        </el-form-item>
                    </el-form>
                </div>   
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="outerVisible = false"  plain>取 消</el-button>
                <el-button @click="changeUserDetail" type="success"  plain>修改</el-button>
                <el-button type="primary" @click="innerVisible = true"  plain>修改密码</el-button>
            </div>
        </el-dialog>
    </div>   
  </div>
  
</template>

<script>
import request from "../utils/request";
export default{
    data(){
        return{
            outerVisible: false,
            innerVisible: false,
            passwordData:{
                oldPassword:"",
                newPassword:"",
                newPassword2:"",
            },
            detailData:{
                id:"",
                name:"",
                sex:"",
                birth:"",
                explain:"",
                imgurl:"",
                email:"",
                time:""
            },
            male:"",
            type:"",
            color:""
        }
    },

    created(){
        this.getUserDetail();
    },

    methods:{
        //获取用户信息
        getUserDetail(){
        request.get('/user/detail').then((res)=>{
            this.detailData.id=res.data.id;
            this.detailData.name=res.data.name;
            this.detailData.sex=res.data.sex;
            this.detailData.birth=res.data.birth;
            this.detailData.explain=res.data.explain;
            this.detailData.imgurl=res.data.imgurl;
            this.detailData.email=res.data.email;
            this.detailData.time=res.data.time
            if(res.data.sex=="男"){
                this.male="el-icon-male";
                this.type="primary";
                this.color="userdetailname1"

            }else{
                this.male="el-icon-female";
                this.type="danger";
                this.color="userdetailname2"
            }
        })
        },
        //转换时间格式
        dateformate(time) {
            let date = new Date(time);
            let year = date.getFullYear();
            let month = date.getMonth()+1;
            let day = date.getDate();
            let result = `${year}-${month}-${day}`;
            return result
        },
        //修改密码
       resetpsw(){
           request.post('/user/psw/change',this.passwordData).then((res)=>{
               window.alert(res.data.message);
               if(res.data.code==200){
                   this.innerVisible=false;
               }  
           })
       },

       //修改用户信息
       changeUserDetail(){
          request.post('/user/detail/change',this.detailData).then((res)=>{
              window.alert(res.data.message);
              this.getUserDetail();
              if(res.data.code==200){
                  this.outerVisible=false;
              }  
          })
       },
       //头像上传
       uploadAvatar(e){
            e.preventDefault();
            const files = e.target.files
            const rawFile = files[0]
            let formData = new FormData()
            formData.append("file", rawFile)
            request.post('/user/uploadAvatar',formData).then((res)=>{
                 this.detailData.imgurl=res.data;
            })   
        }
    }
}
</script>

<style scoped>

* {
    box-sizing:border-box
}

.userdetaillayout{
    padding:20px;
    background-color: #2c3e50;
    height:100%;
    width:100%;
    border-radius: 0px 20px 20px 0px;
} 
.useruserdetail{
    padding:30px;
    /* background-color: #052f4a; */
    background-image: url("/img/2051855.jpg");
    background-size: cover;
    height:100%;
    width:100%;
    display: grid;
    place-items: center;
    border-radius: 5px 10px 10px 5px;
    color:white;
    font-size: 19px;
}
.userdetailavatar{
    height:130px;
    width:130px;
    border-radius: 50%;
    background-color:rgb(212, 222, 237);
    overflow: hidden;
    border: 3px solid rgb(214, 224, 235);
}
.userdetailavatar img{
    height:130px;
    width:130px;
}
.userexplain{
    width:70%;
    display: grid;
    place-items: center;
}
.userexplain p{
    line-height: 2;
    font-size: 18px;
}

.userdetailname1{
    font-size: 25px;
    color:rgb(9, 151, 246);
}
.userdetailname2{
    font-size: 25px;
    color:rgb(245, 114, 114);
}
.userdetailtime{
    width: 70%;
    display: flex;
    justify-content:space-around;
}
.userdetailtime span{
    display: block;
}
.resetpsw{
    display: grid;
    place-items: center;
    border: 3px solid rgb(223, 225, 226);
    /* border-radius: 10px; */
}
.resetpswinput{
    padding:20px;
}
.old, .new, .new2{
    margin:10px
}
.resetpswbutton{
    padding:20px;
    padding-top:0px;
}
.detailform{
    padding:20px;
    border:3px solid rgb(223, 225, 226);
    /* border-radius: 10px; */
    /* display: flex;
    justify-content: space-between; */
}
.avartarinput{
    margin-left:10px;
    margin-bottom:10px;
    padding:10px;
    border:1px solid rgb(223, 222, 222);
    border-radius: 5px;
    /* width:98%; */
    /* display: grid;
    place-items: center; */
}
                
.detailforminput{
    width:100%
}

</style>